<template>
	<view class="mains">
		<view class="headers">
			<view class="jieshao">
				<div class="box1">
						<image :src="goodsimg"></image>
				</div>
				<div class="box2">
					<div>
						<h3>{{goodsname}}</h3>
					</div>
					<div>
						<p>微信号：{{id}}</p>
					</div>
				</div>
			</view>
		</view>
		<view class="box3">
			<view class="wrap">
				<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
					<u-form-item :leftIconStyle="{color: '#888', fontSize: '32rpx'}" left-icon="account" label-width="150"
					 :label-position="labelPosition" label="姓名" prop="name">
						<u-input :border="border" placeholder="请输店姓名" v-model="model.name" type="text"></u-input>
					</u-form-item>
					<u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai" 
					:label-position="labelPosition" label="手机号码" prop="phone"  label-width="150">
						<u-input :border="border" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
					</u-form-item>
					<u-form-item label="证件" :label-position="auto-upload"	 :error-type="errorType" label-width="500upx">
						<u-upload   style="text-indent: 0;" ref="uUpload" :action="action" :file-list="fileList" :auto-upload="true" 
						:max-count="1" :header="header"
						 :name="name" @on-uploaded="onUploaded" :before-upload="beforeUpload" size-type="compressed"></u-upload>
					</u-form-item>
				</u-form>
		</view>
		
		<u-toast ref="uToast" />

	</view>
	
	<div class="baocun" @click="submit()">
		保存
	</div>
	<p v-model="fail"></p>
	</view>
</template>

<script>
export default {
	data() {
		let that = this;
		return {
			header: {
				"token": that.$tok
			},
			action: that.$url+"/index.php/api/v1.Tool/uploadFlie",
			idcard:"",
			wx_nick_name:"",
			wx_total:"",
			id:"",
			agent_id:"",
			fileList:true,
			wanshanimg:"",
			name:"img",
			lists:"",
			filesArr:"",
			model: {
				name: '',
				intro: '',
				phone: '',
				photo: ''
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入姓名',
						trigger: 'blur' ,
					},
					{
						min: 2,
						max: 5,
						message: '姓名长度在2到5个字符',
						trigger: ['change','blur'],
					},
					{
						// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return this.$u.test.chinese(value);
						},
						message: '姓名必须为中文',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change','blur'],
					},
				],
				intro: [
					{
						required: true,
						message: '请填写简介'
					},
					{
						min: 5,
						message: '简介不能少于5个字',
						trigger: 'change' ,
					},
					{
						pattern: /^[\u4e00-\u9fa5]+$/gi,
						message: '简介只能为中文',
						trigger: 'change',
					},
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change','blur'],
					},
					{
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change','blur'],
					}
				],
			},
			border: false,
			check: false,
			selectStatus: 'close',
			actionSheetShow: false,
			pickerShow: false,
			selectShow: false,
			labelPosition: 'left',
			codeTips: '',
			errorType: ['message'],
			goodsimg:"",
			goodsname:"",
			fail:""
		};
	},
	onLoad() {
		console.log(this.action)
	this.getyonghuid()
			this.uUpload = this.$refs.uUpload
			this.action = this.$url + "/index.php/api/v1.Tool/uploadFlie"
	},
	computed: {
		borderCurrent() {
			return this.border ? 0 : 1;
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
		this.getyonghuid()
		this.uUpload = this.$refs.uUpload
		this.action = this.$url + "/index.php/api/v1.Tool/uploadFlie"
	},
	methods: {
			loginsuccess(){
				this.$refs.uToast.show({
									title: '登录成功',
									type: 'success',
									icon:"default",
									url: '/pages/shop/addshop'
				})
			},
			loginfail(x){
					this.$refs.uToast.show({
									title: x,
									type: 'warning',
					})
					this.fail=x
			},
			beforeUpload(index, list) {
				if (index % 2 == 0) return true;
				else return false;
			},
			onUploaded(lists) {
				this.filesArr = lists;
				this.wanshanimg=this.filesArr[0].url
				// console.log(this.wanshanimg);
				console.log("上传中")
				console.log(this.wanshanimg);
			},
			getyonghuid(){
				var agent_id=wx.getStorageSync("agent_id")
				var timeid=wx.getStorageSync("timeid")
				var goodsit=wx.getStorageSync("goodsit")
				// var wximg=wx.getStorageSync("goodsit")
				this.agent_id=agent_id
				this.wx_total=timeid.wx_total
				this.wx_nick_name=timeid.wx_nick_name
				this.id=goodsit.id
				this.goodsimg=goodsit.img
				this.goodsname=goodsit.name
			},
			fasong(){
				var that=this
				let arr=[]
				console.log("要发送的数据")
				console.log(that.model.name)
				console.log(that.model.phone)
				console.log(that.agent_id)
				console.log(that.idcard)
				console.log(that.id)
				// wx.request({
				//          url: that.$url+'/api/v1.Customer/addCustomer', //仅为示例，并非真实的接口地址
				//          method:'post',
				//          data: {
				// 		   true_name:that.model.name,
				// 		   tel:that.model.phone,
				// 		   agent_id:that.agent_id,
				// 		   idcard_url:that.wanshanimg,
				// 		   wx_user_id:that.id
				//          },
				//           header: {
				//               token:that.token // 默认值
				//             },
				//           success(res){
				// 			if(res.data.msg=="成功"){
				// 				// console.log(res.data.msg)
				// 				console.log("提示成功")
				// 				that.loginsuccess()
								
				// 			}
				// 			else{
				// 				console.log("提示失败")
				// 				that.loginsuccess()
				// 			}
				// 		console.log("data的数据变回了")
				//           },
				//           fail(ref){
				//            console.log("发送失败")
				// 		   console.log(ref)
				//           }
				//         })
					this.$flyio.post('v1.Customer/addCustomer', {						true_name:that.model.name,						tel:that.model.phone,						agent_id:that.agent_id,
					   idcard_url:that.wanshanimg,
					   wx_user_id:that.id					}).then((res) => {
						console.log(res);
						console.log(res.msg);
					if(res.msg=="成功"){
						console.log("提示成功")
						that.loginsuccess()
					}
					else{
						console.log("提示失败")
						that.loginfail(res.msg)
					}					})					.catch((e) => {						console.log(e)					})
			},
		
		submit() {
			var that=this
			console.log("要发送的数据")
			console.log(that.agent_id)
			console.log(that.wanshanimg)
			console.log(that.id)
			console.log(that.model.name)
			console.log(that.model.phone)
			this.fasong()
		},
		// 勾选版权协议
		checkboxChange(e) {
			this.model.agreement = e.value;
			console.log(e.value)
		},
		// 选择商品类型回调
	}
};
</script>

<style scoped lang="scss">
.box3{
		flex: 1;
}
.wrap {
	padding: 30rpx;
}

.agreement {
	display: flex;
	align-items: center;
	margin: 40rpx 0;
	.agreement-text {
		padding-left: 8rpx;
		color: $u-tips-color;
	}
}
.boxxian{
		height:10upx ;
		background-color: #f4f4f4;
	}
	.idimgsbox{
		height: 300upx;
		width: 300upx;
		margin:0 50rpx;
	}
	.baocun{
		box-sizing: border-box;
		background-color: $red;
		color: $f;
		align-content: flex-end;
		margin-left: 46upx;
		margin-right: 46upx;
		// padding: 0 46upx;
		// margin-left: 46upx;
		// padding-right: 46upx;
		margin-bottom: 46upx;
		font-size: 32upx;
		text-align: center;
		
		height: 88upx;
		line-height: 88upx;
	}
	
	
	.mains{
		height: 100%;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin: 0 0;
		text-indent: 0;
		// border: 1px solid red;
	}
	span{
		color:red
	}
	p{
		font-size: 21upx;
		color:#999999 ;
	}
	h3{
		font-size: 29upx;
	}
	image {
		// background-color: gainsboro;
		border-radius: 50%;
		width: 82upx;
		height: 82upx;
		// border: 1px solid red;
	}
	.headers{
		height: 148upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding-left: 24upx;
		padding-right: 30upx;
		align-items: center;
		// background-color: red;
		.jieshao{
			display: flex;
			.box2{
				margin-left: 20upx;
				// background-color: red;
			}
		}
	}
</style>
